<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="featon inc.">
    <link rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/static/vendor/font-awesome/css/font-awesome.min.css">
    <link href="/static/vendor/jquery-easyui/themes/default/tree.css" rel="stylesheet">
    <link href="/static/vendor/jquery-easyui/themes/icon.css" rel="stylesheet">
    <link href="/static/vendor/jquery-ui/themes/base/jquery.ui.all.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/vendor/skin/ftskin.css">
    <title></title>
</head>

<body>

<div class="ft-subpage-wrapper container-fluid">
    <form id="form1" name="form1" action="#" method="post">
        <div class="row">
            <div class="col-lg-12" id="form_table">
                <table id="" class="form-table-border" cellpadding="0" cellspacing="0" style="width:100%">
                    <tr>
                        <th style="text-align:center">选择部门</th>
                        <th style="text-align:center">选择用户</th>
                        <th style="text-align:center">已选用户列表</th>
                    </tr>
                    <tr>
                        <td style="width:230px;">
                            <div class="leftTree-box" style="width:220px;height:360px;overflow:auto;">
                                <ul id="leftTree" class="easyui-tree" animate="true">

                                </ul>
                            </div>
                        </td>
                        <td style="width:230px;">
                            <div style="width:220px;height:360px;overflow:auto;" >
                                <ul id="all_user_list" class="all_user_list" >
                                </ul>
                            </div>
                        </td>
                        <td style="width:230px;">
                            <div style="width:220px;height:360px;overflow:auto;" >
                                <ul id="sel_user_list" class="sel_user_list">
                                </ul>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </form>
</div>
<div class="iframe-bottom-tools-box nav navbar-fixed-bottom">
    <button type="button" class="btn btn-info"  id="save_but"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> 保存</button>
    <button type="button" class="btn btn-warning" onclick="modelWindow.closeFrameWindow();"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> 取消</button>
</div>
<input type="hidden" th:id="role_id" th:value="${role_id}" />
<input type="hidden" th:id="handle_name" th:value="${handle_name}" />
<input type="hidden" th:id="dept_id" th:value="${dept_id}" />
<script src="/static/vendor/jquery/jquery-2.1.3.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>

<script src="/static/vendor/jquery-ui/minified/jquery-ui.min.js"></script>
<script src="/static/vendor/jquery-easyui/jquery.easyui.min.js"></script>
<script src="/static/vendor/skin/js/ft-ui.js"></script>
<script src="/static/vendor/skin/js/tree-util.js"></script>
<script src="/static/vendor/skin/js/java.js"></script>
<script src="/static/vendor/skin/js/jquery.c.js"></script>
<script>
    var role_id = $("#role_id").val();
    var handle_name = $("#handle_name").val();
    var dept_id = $("#dept_id").val();
    var frame_name = request.getParameter('frame_name');
    var json_data;
    var selectedUserArray;
    var user_list;

    $(document).ready(function(){
        getAllUserMap();
        //写入已选择过的人员
        setSelectedUserInSelect();

        top.ajax.simple("/dept/getDeptTreeJsonStr/"+dept_id,{},setLeftMenuTreeJsonData);
        setAllUserListByDept(dept_id);
        treeNodeSelected(dept_id);
        initTree();

        $('#save_but').click(saveObject)
    });

    //得到所有的用户
    function getAllUserMap()
    {
        user_list = top.ajax.syncl("/user/getAllUserList","");
    }

    function getUserRealnameFList(uid)
    {
        var relaname = '';
        for(var i in user_list){
            if(user_list[i].user_id == uid){
                relaname = user_list[i].user_realname;
                break;
            }
        }
        return relaname;
    }

    //将用户写对就对应的部门节点中
    function setUserInDeptTree(d_id,open_status)
    {
        treeNodeSelected(d_id);


        for(var i=0;i<user_list.length;i++){
            if(user_list[i].dept_id == d_id)
            {
                insertTreeNode(eval('[{"id":'+user_list[i].user_id+',"iconCls":"icon-user","text":\"'+user_list[i].user_realname+'\","attributes":{"handls":"setUserInSelect()"}}]'));
            }
        }

        var node = $('#leftTree').tree('getSelected');
        //第一级不关闭
        if(open_status == "close")
            $('#leftTree').tree('collapse',node.target);
    }

    //初始化人员节点的双击事件
    function initTree()
    {
        $('#leftTree').tree({
            onClick:function(node){
                setAllUserListByDept(node.id);
            }
        });
    }

    //根据部门ID写入人员列表
    function setAllUserListByDept(dept_id)
    {
        var u_ids = ","+getSelectUserIDS()+",";
        var checked_str = '';
        $("#all_user_list").empty();

        for(var i=0;i<user_list.length;i++)
        {
            if(user_list[i].dept_id == dept_id)
            {
                checked_str = '';
                if(u_ids.indexOf(","+user_list[i].user_id+",") > -1)
                {
                    checked_str = 'checked = "true"';
                }
                $("#all_user_list").append('<li ><input type="checkbox" '+checked_str+' id="user_id" value="'+user_list[i].user_id+'" realname="'+user_list[i].user_realname+'"><label id="'+user_list[i].user_id+'" >'+user_list[i].user_realname+'</label></li>');
            }
        }

        $("label").click(function(){
            $(this).prev().click();
        });

        $("#all_user_list :checkbox").click(function(){
            var isChecked = $(this).prop("checked");
            optSelectedUserList(isChecked,$(this).val(),$(this).attr('realname'))
        });
    }

    //根据是否选中处理选列表中的数据
    function optSelectedUserList(isChecked,u_id,user_realname)
    {
        if(isChecked)
        {
            $("#sel_user_list").append('<li user_id="'+u_id+'"><label>'+user_realname+'</label><img onclick="deleteUser(this,\''+u_id+'\')" src="/static/vendor/skin/images/ico/ico-del.png" alt="" style="float:right;padding-bottom:3px"/></li>');
        }else
        {
            $("#sel_user_list li[user_id='"+u_id+"']").remove();
        }
    }

    //删除已选用户
    function deleteUser(obj,ids)
    {
        $(obj).parent().remove();
        $("#all_user_list input[value='"+ids+"']").removeAttr("checked");
    }


    //将已有的管理员写入到select框中,从父页面方法中获取值
    function setSelectedUserInSelect()
    {
        try{
            var user_ids;
            if(frame_name != "" && frame_name != null)
                user_ids = top.getCurrentFrameObj(frame_name).getSelectedUserIDS();
            else
                user_ids = top.getCurrentFrameObj().getSelectedUserIDS();

            if(user_ids != "" && user_ids != null)
            {
                var tempA = user_ids.split(",");
                for(var i=0;i<tempA.length;i++)
                {
                    optSelectedUserList(true,tempA[i],getUserRealnameFList(tempA[i]));
                }
            }
        }catch(e)
        {
            console.log(e);
        }
    }

    function getSelectUserIDS()
    {
        var ids = "";
        $("#sel_user_list li").each(function(){
            ids += ","+$(this).attr("user_id");
        });
        if(ids != "" && ids != null)
            ids = ids.substring(1);
        return ids;
    }

    function getSelectUserNames()
    {
        var names = "";
        $("#sel_user_list li").each(function(){
            names += ","+$(this).text();
        });
        if(names != "" && names != null)
            names = names.substring(1);
        return names;
    }

    function saveObject()
    {
        if(frame_name != "" && frame_name != null)
            eval("top.getCurrentFrameObj('"+frame_name+"')."+handl_name+"('"+getSelectUserIDS()+"','"+getSelectUserNames()+"')");
        else
            eval("top.getCurrentFrameObj()."+handle_name+"('"+getSelectUserIDS()+"','"+getSelectUserNames()+"')");
        modelWindow.closeFrameWindow();

    }
</script>
</body>

</html>
